<template>
  <div class="search-result">
    <h5>搜索结果</h5>
    <div v-if="searchList.length>0">
      <song-list @play="$emit('play',$event)" :keyword="keywords" :songlist="searchList"></song-list>
    </div>
    <div v-else-if="!searchList">{{!this.searchList?"暂无相关结果":""}}</div>
    <div class="empty" v-else-if="empty">搜索为空,请您重新搜索!</div>
    <music-loading v-else></music-loading>
  </div>
</template>

<script>
import SongList from "@/components/SongList"; 
import MusicLoading from "./MusicLoading.vue";
export default {
  props: {
    keywords: [String, Number, Boolean],
  },
  data() {
    return {
      searchList: [],
      page:1,
      empty: false
    };
  },
  created() {
    this.getResult(); 
  }, 

  beforeRouteLeave(to,from,next){
    next();
  },
  methods: {
    async getResult() {
      let re = await this.axios.get(
        `/cloudsearch?keywords=${this.keywords}&limit=30&offset=30`
      );
      if(re.code === 400){
        this.empty = true;
        return;
      }
      if(re&&re.result.songCount<1){
        this.searchList=false;
        return;
      }
      let slist=re.result.songs.map(item=>{
        item.song={
          artists:item.ar,
          album:item.al,
          privilege:item.privilege
        }
        return item;
      })
      this.searchList = slist;
    },
  },
  components:{
    SongList,
    MusicLoading
  }
};
</script>

<style lang="less" scoped>
.search-result {
  padding: 0 8px;
  h5 {
    font-size: 12px;
    color: #666;
  }
  .empty{
    color: #e4393c;
    font-size: 25px;
    margin-top: 20px;
    text-align: center;
  }
}
</style>